<template>
  <div class="form-wrap">
    <!-- <div class="close-btn"></div> -->
    <van-icon v-if="config.isShowCloseBtn && listData.canDel" name="close" class="close-btn" @click="closeFn" />
    <dynamic-form-part v-for="o of formEl" :key="o.groupLabel" :hidden="o.hidden" :category="o.groupLabel" :items="o.list" :list-data="listData" :config="config" :form-index="idx" @close="closeFn" @linkHandle="linkHandleFn(arguments)" />
  </div>
</template>

<script>
import DynamicFormPart from './DynamicFormPart'

export default {
  components: { DynamicFormPart },
  props: {
    formEl: {
      type: Array,
      required: true
    },
    idx: {
      type: Number,
      default: 0
    },
    listData: {
      type: Object,
      default() {
        return {}
      }
    },
    config: {
      type: Object,
      default () {
        return {
          isShowCloseBtn: false
        }
      }
    }
  },
  methods: {
    closeFn () {
      // clickMode: 0.方法 1.url 2.弹窗
      this.$emit('eventFn', { fnName: 'delFn', clickMode: 0, config: this.config, idx: this.idx })
    },
    linkHandleFn(args) {
      debugger
      var k = args[0]
      // var v = args[1]
      k.forEach(obj => {
        Object.entries(obj).forEach(([key, value]) => {
          console.log(`${key} ${value}`)
        })
        console.log('-------------------')
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/styles/variables.scss';
.form-wrap {
  position: relative;
}
/deep/.close-btn {
  position: absolute;
  right: 10px;
  top: 20px;
  font-size: 30px;
  color: $dangerColor;
}
</style>
